<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'
import { useTransition, useResizeObserver } from '@vueuse/core'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import videoCard from '@/components/videoCard.vue'

const props = defineProps(['videoList', 'name'])

const scrollbarRef = ref()
const innerRef = ref()
const baseNumber = ref(0)

const duration = 500
const cubicBezierNumber = useTransition(baseNumber, {
  duration,
  transition: [0.75, 0, 0.25, 1]
})

const pageCount = ref(0)
const pageIndex = ref(1)

// const inputSlider = () => {
//   let sl = innerRef.value.scrollWidth - innerRef.value.clientWidth
//   baseNumber.value = baseNumber.value === sl ? 0 : sl
// }
useResizeObserver(innerRef, entries => {
  const entry = entries[0]
  pageCount.value = Math.ceil(parseFloat((entry.target.scrollWidth / entry.target.clientWidth).toFixed(2)))
  changePage(1)
})

function changePage(nextPage: number) {
  if (nextPage < 1 || nextPage > pageCount.value) return
  baseNumber.value = ((innerRef.value.scrollWidth - 20) / pageCount.value) * (nextPage - 1)
  pageIndex.value = nextPage
}

watch(
  () => cubicBezierNumber.value,
  () => {
    scrollbarRef.value!.setScrollLeft(cubicBezierNumber.value)
  }
)
</script>
<template>
  <div class="showValueBox">
    <div class="showValueBox-bar">
      <div class="showValueBox-title">{{ props.name }}</div>
      <div class="showValueBox-ctr">
        <el-icon :class="{ noClick: pageIndex <= 1 }" @click="changePage(pageIndex - 1)"><ArrowLeftBold /></el-icon>
        <div>{{ pageIndex }} / {{ pageCount }}</div>
        <el-icon :class="{ noClick: pageIndex >= pageCount }" @click="changePage(pageIndex + 1)"><ArrowRightBold /></el-icon>
      </div>
    </div>
    <el-scrollbar ref="scrollbarRef" always>
      <div ref="innerRef" v-if="videoList && videoList.length > 2">
        <div class="scrollbar-flex-content" v-for="li in 2" :key="li">
          <el-col :xs="8" :sm="6" :md="5" :lg="4" :xl="3" v-for="v in videoList.slice((videoList.length / 2) * (li - 1), (videoList.length / 2) * li)" :key="v.vod_id">
            <videoCard :video-info="v"></videoCard>
          </el-col>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<style>
.el-image__error {
  background: #222;
}
.el-scrollbar {
  .el-scrollbar__bar {
    display: none;
  }
  .el-scrollbar__wrap {
    touch-action: pan-y;
  }
}
</style>
<style scoped lang="less">
@media only screen and (max-width: 1440px) and (min-width: 992px) {
  .el-col-md-5 {
    max-width: calc(100% / 5);
    flex: 0 0 calc(100% / 5);
  }
}

.showValueBox {
  margin: 0 -10px;
  // display: flex;
  // justify-content: space-between;
  &-bar {
    color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    padding-bottom: 10px;
  }
  &-title {
    font-size: 25px;
    font-weight: 700;
  }
  &-ctr {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;

    .el-icon {
      flex-shrink: 0;
      margin: 0 10px;
      font-size: 20px;
      cursor: pointer;

      &:hover {
        -webkit-filter: drop-shadow(0 0 5px rgb(0, 209, 209));
        filter: drop-shadow(0 0 5px rgb(0, 209, 209));
      }
    }
    .noClick {
      color: #555;

      &:hover {
        -webkit-filter: none;
        filter: none;
      }
    }
  }
}
.scrollbar-flex-content {
  display: flex;

  .el-col {
    padding: 10px;
  }

  .el-col:last-child {
    // padding-right: 0;
  }
}
</style>
